<?php

use yii\helpers\Url;

/* @var $this yii\web\View */
/* @var $model \common\models\Record */
/* @var $list \common\models\Awards[] */
$this->title = '马拉松大抽奖';
?>

<!-- step4 -->
<section class="page-section prize-step4">
    <div class="prize-header">
        <h2>马拉松大抽奖</h2>
    </div>
    <div class="prize-step4-main">
        <canvas id="js-scratch-canvas"></canvas>
    </div>
</section>

<!-- step6 -->
<section class="page-section prize-step6 hidden">
    <div class="prize-header">
        <h2>马拉松大抽奖</h2>
    </div>
    <div class="prize-step6-result">
        <h2>恭喜<?= $model->name ?>中奖</h2>
        <strong>
            <?= $model->awards->name_awards ?>
        </strong>
        <img src="/prize-img/<?= $model->awards->img_name ?>" alt="">
        <p>
            兑奖时间和地点：<br>
            10月11日5:00前，<br>
            北京马博会B3展位置。<br>
            过期不兑奖，视为自动弃权。<br>
            凭号码牌兑奖，不可代领。<br>
        </p>
    </div>
    <div class="prize-step6-button">
        <a href="" class="prize-btn prize-btn-submit">截图兑奖，晒朋友圈</a>
    </div>
</section>

<script src="js/jquery.min.js"></script>
<script src="js/Scratch.js"></script>
<script>
    var scratch = new Scratch({
        canvasId: 'js-scratch-canvas',
        imageBackground: './prize-img/<?= $model->awards->img_name ?>',
        pictureOver: './prize-img/foreground.jpg',
        cursor: {
            x: '20',
            y: '17'
        },
        radius: 20,
        nPoints: 100,
        percent: 50,
        callback: function () {
            $('.prize-step4').addClass('hidden');
            // 中奖是step6 未中奖是step5
            $('.prize-step6').removeClass('hidden');
        },
        pointSize: { x: 3, y: 3}
    });
</script>
